<template>
  <div>
    <h1>遍历数组</h1>
    <!-- 数组遍历,腰为每一个元素添加一个唯一的key值:优化dom的渲染 -->
    <div v-for="(item, index) in arr" :key="index">{{ item + 1 }}</div>
    <hr />
    <!-- 遍历对象 -->
    <div v-for="(item, index) in obj" :key="index">{{ item }}</div>
    <hr />
    <!-- 遍历对象数组:in可以换成of -->
    <div v-for="(item, index) of obj2" :key="index">
      姓名：{{ item.name }} 性别：{{ item.sex }} 年龄：{{ item.age }}
    </div>
  </div>
</template>

<script>
export default {
  name: "demon4",
  data() {
    return {
      arr: [1, 2, 3, 4, 5],
      obj: {
        name: "张三",
        sex: "男",
        age: 20
      },
      obj2: [
        { name: "李四", sex: "男", age: 33 },
        { name: "王兰", sex: "女", age: 25 }
      ]
    };
  }
};
</script>
<style lang="stylus" scoped></style>
